﻿<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=gbk" />
    <title>Polygon添加鼠标悬浮TIP</title>
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <style type="text/css">
        /*==========================================*/
        #tooltip {
            float: left;
            position: absolute;
            border: 1px solid #333;
            background: #f7f5d1;
            padding: 1px;
            color: #333;
            display: none;
        }
        /*==========================================*/
    </style>
    <script type="text/javascript">

        function initialize() {
            var myLatLng = new google.maps.LatLng(39.142842478062505, 117.1966552734375);
            var myOptions = {
                zoom: 8,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var pg;

            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var triangleCoords = google.maps.geometry.encoding.decodePath("sjttF{uxkUf|CyiK?uxJbnJoyCtvDivIpeGytA??duBidPnoCe~E`sG_fBzxFdwBa{Ah}Lps@~zKrbCn|S`hIbwB`mb@ogJrhBi}Lp{Tja@~kKkdPusL}sHv}Cys^|~g@r_Np~Yg|i@f`Z|c|@bwVufQtjQn`G?baV~lm@jvIloNvgeAstMnnMz}Fl|S_pSh}Lx_Dnq]a|Nnr@?baVk_`@d~EuwV{bH_oAsmTwcRsqG?rqGst[dPmbMhoFmn^tjDcsXelLq_FcsOd~JewBfcCmq]wuUe~EwnOdPsuB_iRwbJn|SoxTuqGyyOihCmxFsmTixFelLadN?");

            // Construct the polygon
            pg = new google.maps.Polygon({
                paths: triangleCoords,
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#FF0000",
                fillOpacity: 0.35
            });

            //面加入页面中
            pg.setMap(map);


            /*==========================================*/
            pg.title = "标题";	//这里是标题,Listener闭包无法读取,只能在外部给方法添加
            /*==========================================*/
            //pg 地图面
            //鼠标悬浮
            google.maps.event.addDomListener(pg, "mouseover", function (event) {
                var myTitle = this.title;
                var tooltip = "<div id='tooltip'>" + myTitle + "<\/div>"; //创建 div 元素
                $("body").append(tooltip);	//把它追加到文档中
                $("#tooltip").css({
                    "top": (event['Ra'].pageY + 21) + "px",
                    "left": (event['Ra'].pageX + 10) + "px"
                }).show();
            });

            //鼠标离开
            google.maps.event.addDomListener(pg, "mouseout", function () {
                $("#tooltip").remove();
            });

            //鼠标移动
            google.maps.event.addDomListener(pg, "mousemove", function (event) {
                $("#tooltip").css({
                    "top": (event['Ra'].pageY + 21) + "px",
                    "left": (event['Ra'].pageX + 10) + "px"
                });
            });
            /*==========================================*/

        }
    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas"></div>
</body>
</html>
